---
title: "useHotUpdaterStore"
description: "A store related to updates."
icon: Database
---

## Download Progress

`progress` is a number representing the bundle download progress. It has a value between 0 and 1.

When `isUpdateDownloaded` is `true`, it means the bundle download is complete and the update will be applied when `HotUpdater.reload()` is called. The `isUpdateDownloaded` becomes `true` when the `progress` value reaches 1.

```tsx
import { HotUpdater, useHotUpdaterStore } from "@hot-updater/react-native";
import { Button, Text, View } from "react-native";

function App() {
  const { progress, isUpdateDownloaded } = useHotUpdaterStore();

  return (
    <View>
      <Text>Hello World</Text>
      <Text>{Math.round(progress * 100)}%</Text>
      <Button
        title="Reload"
        onPress={() => HotUpdater.reload()}
        disabled={!isUpdateDownloaded}
      />
    </View>
  );
}

export default HotUpdater.wrap({
  baseURL: "<your-update-server-url>",
  updateStrategy: "appVersion", // or "fingerprint"
  updateMode: "auto",
  // If you need to send request headers, you can use the `requestHeaders` option.
  requestHeaders: {
    Authorization: "Bearer <your-access-token>",
  },
})(App);
```

## Optimizing Renders with Selectors

You can optimize your component renders by using selectors to subscribe only to specific parts of the state. This prevents unnecessary re-renders when other parts of the state change.

```tsx
import { HotUpdater, useHotUpdaterStore } from "@hot-updater/react-native";
import { Text } from "react-native";

function ProgressDisplay() {
  // Only re-renders when progress changes
  const progress = useHotUpdaterStore(state => state.progress);

  return <Text>{Math.round(progress * 100)}%</Text>;
}

function UpdateButton() {
  // Only re-renders when isUpdateDownloaded changes
  const isUpdateDownloaded = useHotUpdaterStore(state => state.isUpdateDownloaded);

  return (
    <Button
      title="Reload"
      onPress={() => HotUpdater.reload()}
      disabled={!isUpdateDownloaded}
    />
  );
}
```
